<template>
  <div class="SchoolTeach">
    <div class="teachItem" v-for="item in teacherList" :key="item.id">
      <img :src="`https://ss.lanqb.com/${item.user.avatar}`" alt="" />
      <h3>
        <span>{{ item.nickname }}</span> <i class="iconfont">V</i>
      </h3>
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SchoolTeach",
  props: ["teacherList"],

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.SchoolTeach {
  background-color: white;
  display: flex;
  width: 100vw;
  height: 152px;
  .teachItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 125px;
    height: 151px;
    > img {
      width: 84px;
      height: 84px;
      border-radius: 50%;
    }
    > h3 {
      .iconfont {
        font-family: Icon;
        vertical-align: top;
        color: #edce8c;
        word-wrap: break-word;
        word-break: break-all;
      }
      margin-top: 10px;
      font-weight: 400;
    }
  }
}
</style>
